<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search mb15">
        <div class="form-rules-three-container">
          <el-form :model="state.form" :rules="state.rules" ref="formRulesThreeRef" size="default" label-width="100px" class="mt35">
            <el-row :gutter="35">

              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="查询日期" prop="date">
                  <el-date-picker
                      v-model="state.form.date"
                      type="date"
                      placeholder="请选择日期"
                      size="default"
                      value-format="YYYYMMDD"
                  />
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="记录最早时间" prop="mirt">
                  <el-input v-model="state.form.mirt" placeholder="请输入记录最早时间" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="记录最晚时间" prop="mart">
                  <el-input v-model="state.form.mart" placeholder="请输入记录最晚时间" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="域名最小时延" prop="midt">
                  <el-input v-model="state.form.midt" placeholder="请输入域名最小时延" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="域名最大时延" prop="madt">
                  <el-input v-model="state.form.madt" placeholder="请输入域名最大时延" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="连接最小时延" prop="mitt">
                  <el-input v-model="state.form.mitt" placeholder="请输入连接最小时延" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="连接最大时延" prop="matt">
                  <el-input v-model="state.form.matt" placeholder="请输入连接最大时延" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="下载最小时延" prop="mist">
                  <el-input v-model="state.form.mist" placeholder="请输入下载最小时延" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="下载最大时延" prop="mast">
                  <el-input v-model="state.form.mast" placeholder="请输入下载最大时延" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="渲染最小时延" prop="miet">
                  <el-input v-model="state.form.miet" placeholder="请输入渲染最小时延" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="渲染最大时延" prop="maet">
                  <el-input v-model="state.form.maet" placeholder="请输入渲染最大时延"  clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="加载最小时延" prop="miat">
                  <el-input v-model="state.form.miat" placeholder="请输入加载最小时延" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="加载最大时延" prop="maat">
                  <el-input v-model="state.form.maat" placeholder="请输入加载最大时延"  clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="排序类型" prop="sort">
                  <el-select
                      v-model="state.form.sort"
                      clearable
                      placeholder="请选择排序类型"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in sortOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="排序方式" prop="orde">
                  <el-select
                      v-model="state.form.orde"
                      clearable
                      placeholder="请选择排序方式"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in ordeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-button size="default" type="primary" class="ml10"   @click="searchList">
                  <el-icon>
                    <ele-Search />
                  </el-icon>
                  查询
                </el-button>

                <el-button size="default"  class="ml10"   @click="resetQuery">
                  <el-icon><ele-Refresh /></el-icon>重置
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>

<!--        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <span style="margin-top: 5px;color: #606266;">响应最小时长：</span>
            <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <span style="margin-top: 5px;color: #606266;">响应最小时长：</span>
            <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <span style="margin-top: 5px;color: #606266;">响应最小时长：</span>
            <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <span style="margin-top: 5px;color: #606266;">响应最小时长：</span>
            <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
          </el-col>
        </el-row>-->




			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="record_time" label="记录时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="access_path" label="访问路径" show-overflow-tooltip></el-table-column>
        <el-table-column prop="domain_time" label="域名时延" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tcpnet_time" label="连接时延" show-overflow-tooltip></el-table-column>
        <el-table-column prop="source_time" label="下载时延" show-overflow-tooltip></el-table-column>
        <el-table-column prop="render_time" label="渲染时延" show-overflow-tooltip></el-table-column>
        <el-table-column prop="amount_time" label="加载时延" show-overflow-tooltip></el-table-column>

<!--				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
							>详情</el-button
						>
					</template>
				</el-table-column>-->
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="state.tableData.param.pageNum"
				background
				v-model:page-size="state.tableData.param.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
<!--		<UserDialog ref="userDialogRef" @refresh="getTableData()" />-->
	</div>
</template>

<script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {getBrowerLst, getServerDetail} from '/@/api/cec/bdst';

// 引入组件
// const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialog.vue'));

// 定义变量内容
// const userDialogRef = ref();
const sortOptions=[ {
  value: 'record_evid',
  label: '事件号码',
},
  {
    value: 'record_time',
    label: '记录时间',
  },
  {
    value: 'domain_time',
    label: '域名时延',
  },
  {
    value: 'tcpnet_time',
    label: '连接时延',
  },
  {
    value: 'source_time',
    label: '下载时延',
  },
  {
    value: 'render_time',
    label: '渲染时延',
  },
  {
    value: 'amount_time',
    label: '加载时延',
  },
]
const ordeOptions=[{
  value: 'asc',
  label: '升序',
},
  {
    value: 'desc',
    label: '降序',
  }
]
let now = new Date();
let yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
let month=yesterday.getMonth()+1;
let day=yesterday.getDate();

let monthStr="";
let dayStr="";
if(Number(month)<10){
  monthStr='0'+month;
}else{
  monthStr=month+'';
}
if(Number(day)<10){
  dayStr='0'+day;
}else{
  dayStr=day+'';
}

let  yesterdayDate = yesterday.getFullYear()+monthStr +dayStr;


const state = reactive({
  form: { date: yesterdayDate, size: '5', page: '1', mirt: '' , mart: '', midt: '', madt: '', mitt: '', matt: '', mist: '', mast: '', miet: '', maet: '', miat: '', maat: '', sort: '', orde: ''},
  rules: {
    time: { required: true, message: '请输入当前日期', trigger: 'blur' },
    size: { required: true, message: '请输入页面行数', trigger: 'blur' },
    page: { required: true, message: '请输入页面页数', trigger: 'blur' },
  },
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});

// 初始化表格数据
const getTableData =async () => {
	state.tableData.loading = true;
	// const data = [];
  // const param:any=null;
  // param.date=state.form.date;
  // param.size=state.form.size;
  // param.page=state.form.page;

  state.form.date=state.form.date==''?null:state.form.date;
  state.form.size=state.tableData.param.pageSize;
  state.form.page=state.tableData.param.pageNum;

  state.form.mirt=state.form.mirt==''?null:state.form.mirt;
  state.form.mart=state.form.mart==''?null:state.form.mart;
  state.form.midt=state.form.midt==''?null:state.form.midt;
  state.form.madt=state.form.madt==''?null:state.form.madt;
  state.form.mitt=state.form.mitt==''?null:state.form.mitt;
  state.form.matt=state.form.matt==''?null:state.form.matt;
  state.form.mist=state.form.mist==''?null:state.form.mist;
  state.form.mast=state.form.mast==''?null:state.form.mast;
  state.form.miet=state.form.miet==''?null:state.form.miet;
  state.form.maet=state.form.maet==''?null:state.form.maet;
  state.form.miat=state.form.miat==''?null:state.form.miat;
  state.form.maat=state.form.maat==''?null:state.form.maat;
  state.form.sort=state.form.sort==''?null:state.form.sort;
  state.form.orde=state.form.orde==''?null:state.form.orde;
 /* const  result={
    "code": 0,
    "data": {
      "info": [
        {
          "record_time": "2023-06-06 16:56:11",
          "access_path": "/api/workflow/reqform/requestOperation",
          "domain_time": 200,
          "tcpnet_time": 1146,
          "source_time": 1182,
          "render_time": 200,
          "amount_time": 3640
        },
        {
          "record_time": "2023-06-06 08:10:18",
          "access_path": "/service/signlog/client/stat/1686010217",
          "domain_time": 200,
          "tcpnet_time": 1139,
          "source_time": 1143,
          "render_time": 200,
          "amount_time": 3121
        }
      ],
      "page": 20,
      "size": 2,
      "tota": 51
    },
    "msgs": "ok"
  };*/
  const {code,msgs,data}=await  getBrowerLst(state.form);

  if(code===0){
    console.log(data)
    state.tableData.data = data.info;
    state.tableData.total = data.tota;
    setTimeout(() => {
      state.tableData.loading = false;
    }, 500);
  }

};
// 打开新增用户弹窗
// const onOpenAddUser = (type: string) => {
// 	userDialogRef.value.openDialog(type);
// };
// // 打开修改用户弹窗
// const onOpenEditUser = (type: string, row: any) => {
// 	userDialogRef.value.openDialog(type, row);
// };
// 删除用户
// const onRowDel = (row: RowUserType) => {
// 	ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
// 		confirmButtonText: '确认',
// 		cancelButtonText: '取消',
// 		type: 'warning',
// 	})
// 		.then(() => {
// 			getTableData();
// 			ElMessage.success('删除成功');
// 		})
// 		.catch(() => {});
// };
const resetQuery=()=>{
  state.form.date=yesterdayDate;
  state.form.mirt='';
  state.form.mart='';
  state.form.midt='';
  state.form.madt='';
  state.form.mitt='';
  state.form.matt='';
  state.form.mist='';
  state.form.mast='';
  state.form.miet='';
  state.form.maet='';
  state.form.miat='';
  state.form.maat='';
  state.form.sort='';
  state.form.orde='';
  getTableData();
}
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
const formRulesThreeRef = ref();
//查询
const searchList=async ()=>{
  //校验
  const valid = await formRulesThreeRef.value.validate().catch(() => {});
  if (!valid) return false;
  try {
    getTableData();
  } catch (error: any) {
    // useMessage().error(error.msg);
    ElMessage.warning(error.msg);
  } finally {

  }


}
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
</style>
